<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Dojo-Bootstrap/Carousel</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="assets/styles.css">
        <link rel="stylesheet" href="assets/docs.css">
        <link rel="stylesheet" href="assets/responsive.css">
        
        <style>
            #my-carousel {
                max-width: 1110px;
            }
        </style>
    </head>

    <body data-spy="scroll" data-target=".bs-docs-sidebar">
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li><a href="index.html">Tests</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
            
        <header class="jumbotron subhead" id="overview">
            <div class="container">
                <h1>Dojo-Bootstrap/Carousel</h1>
            </div>
        </header>
        
        <div class="container">
            <div class="row">
                <section>
                    <div id="my-carousel" class="carousel slide">
                        <div class="carousel-inner">
                            <div class="item active">
                                <img src="assets/carousel-01.jpg">
                                <div class="carousel-caption">
                                    <h4>Lake</h4>
                                    <p>Canada?</p>
                                </div>
                            </div>
                            <div class="item">
                                <img src="assets/carousel-02.jpg">
                                <div class="carousel-caption">
                                    <h4>Hills</h4>
                                    <p>California?</p>
                                </div>
                            </div>
                            <div class="item">
                                <img src="assets/carousel-03.jpg">
                                <div class="carousel-caption">
                                    <h4>Dirt Road</h4>
                                    <p>Netherlands?</p>
                                </div>
                            </div>
                            <div class="item">
                                <img src="assets/carousel-04.jpg">
                                <div class="carousel-caption">
                                    <h4>Snow</h4>
                                    <p>Switzerland?</p>
                                </div>
                            </div>
                        </div>
                        <a class="left carousel-control" href="#my-carousel" data-slide="prev">&lsaquo;</a>
                        <a class="right carousel-control" href="#my-carousel" data-slide="next">&rsaquo;</a>
                    </div>
                </section>
            </div>
        </div>
        
        <script type="text/javascript" src="assets/config.js"></script>
        <script type="text/javascript" src="../vendor/dojo/dojo/dojo.js"></script>
        
        <script>
            require([
                "bootstrap/Carousel",
                "dojo/query",
                "dojo/on"
            ], function (
                Carousel,
                query,
                on
            ) {
                query("#my-carousel").carousel({
                    interval: 5000
                });
                
                query('#my-carousel').on('slide', function () {
                    console.info('slide');
                });
                
                query('#my-carousel').on('slid', function () {
                    console.info('carousel has just slid');
                });
            });
        </script>
    </body>
</html>